<template>
  <div id="scale"></div>
</template>

<script>
// import { selectscales } from '../../../api/dataCenter';
// import { findDictByCode } from '../../../api/index';
export default {
  name: 'scale',
  data () {
    return {
      name: [],
      data: [{ name: '20人以下', value: 60561 }, { name: '20-99人', value: 4819 }, { name: '100-499人', value: 2006 }, { name: '500-999人', value: 474 }, { name: '1000-9999人', value: 404 }, { name: '10000人以上', value: 208 },{name:'其他',value:7608}]
    };
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('scale'));
      // 绘制图表
      myChart.setOption({
        tooltip: { trigger: 'item', formatter: '{b} : {c} ({d}%)' },
        legend: {
          type: 'scroll',
          top: 15,
          right: 10,
          width: 250,
          pageButtonPosition: 'end',
          textStyle: {
            color: '#fff'
          },
          data: this.name,
          pageTextStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            // radius: ['50%', '70%'],
            // avoidLabelOverlap: false,
            left: 150,
            top: 40,
            width: 200,
            height: 200,
            selectedMode: 'single',
            label: {
              formatter: '{c}',
              color: '#fff'
            },
            labelLine: {
              show: true
            },
            data: this.data,
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          }
        ]
      });
    }
  },
  mounted () {
    // let obj = {};
    // findDictByCode('scale')
    //   .then(data => {
    //     if (data.success) {
    //       console.log(data);
    //       data.data.forEach(item => {
    //         obj[item.name] = item.val;
    //       });
    //       obj['未知'] = 0;
    //       console.log(obj);
    //       return selectscales();
    //     }
    //   })
    //   .then(data => {
    //     console.log(data);
    //     if (data.success) {
    //       this.data = Object.keys(obj).map(val => {
    //         let dataItem = { name: val };
    //         dataItem.value = data.data.find(item => {
    //           if (item.scale === null) {
    //             return obj[val] === 0;
    //           } else {
    //             return obj[val] === item.scale;
    //           }
    //         }).scaleCount;
    //         return dataItem;
    //       });
    //       this.name = Object.keys(obj);
    //       console.log(this.data);
    //     }
    //   });
    let num = 0;
    this.name = this.data.map(i => {
      num += i.value;
      return i.name
    })
    console.log(num);
    this.drawLine();
  }
};
</script>

<style scoped>
#scale {
    width: 500px;
    height: 242px;
    margin: 200px 0 0;
    border: 1px dashed rgb(54, 164, 180, 0.6);
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    background: url('../../../assets/img/scale.png') no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 1);
}
</style>